.container {
  --inset: 4px;
}

.options {
  position: relative;
  display: flex;
  padding: var(--inset);

  &::before {
    content: '';
    background-color: rgb(var(--rgbText) / 0.05);
    position: absolute;
    inset: 0;
    clip-path: polygon(
      0 0,
      100% 0,
      100% calc(100% - 10px),
      calc(100% - 10px) 100%,
      0 100%
    );
  }
}

.button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  color: var(--colorTextLight);
  transition-property: color, background;
  transition-duration: var(--durationM);
  transition-timing-function: ease;
  border: 0;
  padding: 0 24px;
  height: 56px;
  font-size: inherit;
  font-family: inherit;
  font-weight: var(--fontWeightMedium);
  cursor: pointer;

  &[aria-checked='true'] {
    color: var(--colorTextBody);
  }

  &::before {
    --inset: 12px;

    content: '';
    position: absolute;
    top: var(--inset);
    bottom: var(--inset);
    left: 0;
    width: 1px;
    background-color: rgb(var(--rgbText) / 0.1);
    transition: opacity var(--durationM) var(--bezierFastoutSlowin);
    opacity: 0;
  }

  &:not([aria-checked='true']) + &:not([aria-checked='true'])::before {
    opacity: 1;
  }
}

.indicator {
  position: absolute;
  top: var(--inset);
  bottom: var(--inset);
  left: 0;
  filter: drop-shadow(0 6px 12px rgb(var(--rgbBlack) / 0.2));
  transform: translate3d(var(--left), 0, 0);
  width: var(--width);

  @media (--mediaUseMotion) {
    transition-property: width, transform;
    transition-duration: var(--durationM);
    transition-timing-function: var(--bezierFastoutSlowin);
  }

  &::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: rgb(var(--rgbBackgroundLight));
    filter: brightness(2.2);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 100% 100%, 0 100%);

    @media (--mediaUseMotion) {
      transition: clip-path var(--durationM) var(--bezierFastoutSlowin);
    }
  }

  &[data-last='true']::before {
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%);
  }
}
